<template>
  <!-- 左侧模块 -->
  <div class="left_box">
    <div class="left_box_top colBlueTag pt20 ft24">
      <div class="pl30 mb30 font_weight">遥感监测</div>
      <div v-for="item in 3" :key="item" class="mt15 ml15" :class="'left_box_tag_back' + item">
      </div>
    </div>
    <div class="mt20 left_box_bottom colBlueTag pt20 pl20 ft24">
      <div class="mb30 font_weight">农情感知与智能农机</div>
      <div class="chart">
        <v-chart autoresize :option="leftLine"></v-chart>
      </div>
    </div>
  </div>
</template>

<script>
import leftLine from '../echarts/leftLine'
export default {
  name: 'LeftBox',
  components: {
  },

  data() {
    return {
      leftLine
    }
  },

  mounted() {

  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.left_box {
  height: 100%;
  position: absolute;
  left: 30px;
  z-index: 9999;
}
@for $i from 1 through 3{
  .left_box_tag_back#{$i} {
    background: url('~@/assets/leftTagBack#{$i}.png');
    background-size: 100% 100%;
    width: 265px;
    height: 78px;
  }
}

.left_box_top {
  width: 344px;
  height: 364px;
  background: #01233760;
}
.left_box_bottom {
  width: 344px;
  height: 524px;
  background: #01233760;
}
::v-deep .chart {
  width: 300px;
  height: 455px;
  .echarts {
    width: 100%;
    height: 100%
  }
}
</style>
